<template>
  <div class="image-viewer-container">
    <!-- 主图展示区 -->
    <div class="main-image-area" @mouseenter="pauseAutoPlay" @mouseleave="startAutoPlay">
      <div class="image-wrapper">
        <img 
          :src="currentImage.url" 
          :class="{ zoomed: isZoomed }"
          @click="toggleZoom"
          ref="mainImage"
        />
        <!-- 放大镜效果 -->
        <div 
          v-if="isZoomed" 
          class="zoom-lens"
          @mousemove="handleZoomMove"
        ></div>
      </div>

      <!-- 轮播控制 -->
      <div class="carousel-controls">
        <button @click="prevSlide" class="nav-btn prev">❮</button>
        <button @click="nextSlide" class="nav-btn next">❯</button>
      </div>
    </div>

    <!-- 缩略图导航 -->
    <div class="thumbnail-nav">
      <div 
        v-for="(img, index) in images" 
        :key="img.id"
        class="thumbnail-item"
        :class="{ active: index === currentIndex }"
        @click="switchImage(index)"
      >
        <img :src="img.thumbUrl" />
      </div>
    </div>

    <!-- 图片预览模态框 -->
    <div v-if="showPreview" class="preview-modal" @click="showPreview = false">
      <div class="modal-content">
        <img :src="currentImage.url" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { id: 1, url: 'main1.jpg', thumbUrl: 'thumb1.jpg' },
        { id: 2, url: 'main2.jpg', thumbUrl: 'thumb2.jpg' },
        { id: 3, url: 'main3.jpg', thumbUrl: 'thumb3.jpg' }
      ],
      currentIndex: 0,
      autoPlayInterval: null,
      isZoomed: false,
      showPreview: false
    };
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex];
    }
  },
  mounted() {
    this.startAutoPlay();
  },
  beforeDestroy() {
    this.stopAutoPlay();
  },
  methods: {
    nextSlide() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    },
    prevSlide() {
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
    },
    switchImage(index) {
      this.currentIndex = index;
    },
    startAutoPlay() {
      this.autoPlayInterval = setInterval(this.nextSlide, 3000);
    },
    pauseAutoPlay() {
      clearInterval(this.autoPlayInterval);
    },
    stopAutoPlay() {
      clearInterval(this.autoPlayInterval);
    },
    toggleZoom() {
      this.isZoomed = !this.isZoomed;
    },
    handleZoomMove(event) {
      // 实现放大镜移动逻辑（需根据实际DOM结构计算位置）
      const lens = event.currentTarget;
      const mainImage = this.$refs.mainImage;
      
      const rect = mainImage.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;

      lens.style.left = `${x - lens.offsetWidth/2}px`;
      lens.style.top = `${y - lens.offsetHeight/2}px`;
    }
  }
};
</script>

<style lang="scss" scoped>
.image-viewer-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.main-image-area {
  position: relative;
  height: 500px;
  overflow: hidden;
}

.image-wrapper {
  height: 100%;
  position: relative;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.3s;
}

.image-wrapper img.zoomed {
  cursor: zoom-out;
  transform: scale(2);
}

.zoom-lens {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.carousel-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.nav-btn {
  background: rgba(0,0,0,0.3);
  color: white;
  border: none;
  padding: 15px;
  cursor: pointer;
  font-size: 24px;
}

.thumbnail-nav {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  overflow-x: auto;
  padding: 10px 0;
}

.thumbnail-item {
  flex: 0 0 80px;
  height: 80px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.3s;
}

.thumbnail-item.active {
  border-color: #ff4400;
}

.thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content img {
  max-width: 90%;
  max-height: 90%;
  border: 5px solid white;
}
</style>